import { dayjs } from "element-plus";
import CardHead from "../ranking/components/cardHead";
import BaseChart from "@/components/Chart/BaseChart.vue";
import { trendAlarm } from "@/api/modules/iot/alarm";
import { DataChart } from "@/components/Chart/interface";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const chartView = ref<any>();
		const state = reactive<any>({
			timeRange: [dayjs().add(-7, "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
		});
		const param = reactive({
			type: "",
			timeStamp: ""
		});
		onMounted(() => {
			init();
		});
		const init = async () => {
			param.timeStamp = `${dayjs(state.timeRange[0]).format("YYYY-MM-DD 00:00:00")}~${dayjs(state.timeRange[1]).format(
				"YYYY-MM-DD 23:59:59"
			)}`;
			let { result } = await trendAlarm(param);
			let data: any = result || {};
			//转换成图表需要的数据格式
			let chartData: DataChart.DataList = { dataList: [] };
			Object.keys(data).map((key: any) => {
				chartData.dataList.push({ time: key, value: data[key].total, group: "告警次数" });
			});
			chartView.value.setData(chartData);
		};
		//时间切换
		watch(
			() => state.timeRange,
			() => {
				init();
			}
		);
		return () => {
			return (
				<div class="trend-page h-full">
					<el-card
						class="h-full"
						v-slots={{
							header: () => (
								<div class="flex justify-between content-center">
									<span class="card-title">{proxy?.$t("alarmmonitor.card_title.trend")}</span>
									<CardHead v-model:timeRange={state.timeRange}></CardHead>
								</div>
							)
						}}
						shadow="never"
						body-style={{ padding: 0 }}
					>
						<BaseChart class="pl-4 bg-white h-full" ref={chartView} />
					</el-card>
				</div>
			);
		};
	}
});
